<link rel="stylesheet" href="./nepadmin/lay/extends/cropper/cropper.css">
<div class="layui-fluid" lay-title="表单组合">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload-list" style="margin:0">
                            <img src="/nepadmin/images/profile.jpg" style="width: 120px;height: 80px" id="srcimgurl" class="layui-upload-img">
                            <input type="hidden" id="image" name="image">
                        </div>
                    </div>
                    <div class="layui-input-inline layui-btn-container" style="width: auto;">
                        <button class="layui-btn layui-btn-primary" type="button" id="editimg">修改图片</button >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" autocomplete="off" placeholder="请输入链接" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">有效</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="有效" checked="">
                        <input type="radio" name="status" value="0" title="无效">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNum" lay-verify="required|number" autocomplete="off" placeholder="请输入排序" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'admin', 'form','layer','croppers'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , admin = layui.admin
            , croppers = layui.croppers;

        var id = POPUP_DATA.id;
        var table = POPUP_DATA.table;
        var banner = {};

        form.render(null, 'form-group');

        croppers.render({
            elem: '#editimg'
            ,saveW:200     //保存宽度
            ,saveH:200
            ,mark:3/2    //选取比例
            ,area:['900px', '630px']  //弹窗宽度
            ,url: "/fileUpload?token="+admin.getLoginToken()  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            ,done: function(url){ //上传完毕回调
                console.log(url)
                $("#image").val(url);
                $("#srcimgurl").attr('src',url);
            }
        });

        // 初始化
        if (id) {
            admin.get({
                type: 'get',
                url: '/banner/info/' + id,
                dataType: 'json',
                success: function (data) {
                    banner = data.banner;
                    if (banner) {
                        form.val("form-group", {
                            "title": banner.title // "name": "value"
                            , "url": banner.url
                            , "status": banner.status
                            , "image": banner.image
                            , "orderNum": banner.orderNum
                        });
                        $("#srcimgurl").attr("src",banner.image);
                    }
                }
            });
        }

        form.on('submit(form-group-submit)', function (data) {
            var field = data.field;
            var bannerData = {};
            var url = "/banner/save";
            if (id) {
                url = "/banner/update?_method=PUT";
                bannerData.id = id;
            }
            bannerData.title = field.title;
            bannerData.url = field.url;
            bannerData.status = field.status;
            bannerData.image = field.image;
            bannerData.orderNum = field.orderNum;

            admin.post({
                url: url,
                contentType: "application/json",
                data: JSON.stringify(bannerData),
                success: function (res) {
                    if (res.code == 0) {
                        // 提醒保存成功，关闭当前弹窗
                        layer.msg(res.msg);
                        layer.closeAll();
                        //刷新
                        table.reload('list-table-banner', {
                            url: '/banner/page?token=' + admin.loginToken,
                            page: {
                                curr: 1
                            }
                        })
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>